<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			#fs{
				display: flex;
				width: 60%;
				height: 160px;
				background-color: #FF0000;
				margin: 0 auto;
			}
			#fs>span:nth-child(1){
				width: 100px;
				height: 100px;
				background-color:palegreen;
			}
			#fs>span:nth-child(2){
				flex: 1;
				background-color:aqua;
			}
			#fs>span:nth-child(3){
				width: 100px;
				height: 100px;
				background-color:blue;
			}
			
			p{
				display: flex;
				width: 60%;
				height: 160px;
				background-color: peru;
				margin: 100px auto;
			}
			p span{
				flex: 1;
				background-color:#0000FF ;
				margin-right: 1px;
			}
			p span:nth-child(1){
				display: flex;
				flex-direction: column;
				flex: 2;
				background-color: purple;
			}
		</style>
		
		
	</head>
	<body>
		/*flex子项常见属性 flex align-self order */
		/*flex属性定义子项目分配剩余空间 用flex来表示占多少份*/
		<div id="fs">
			<span >1</span>
			<span >2</span>
			<span >3</span>
		</div>
		<p>
			<span >
				<span>上</span>
				<span>下</span>	
			</span>

			<span >2</span>
			<span >3</span>
		</p>
		
		
	</body>
</html>
